<template>
  <div id="off-line">
    <span v-show="isShowHint">暂无数据</span>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      deviceName: [],
      deviceData: [],
      isShowHint: false
    };
  },

  methods: {
    getOffStatusListData(data) {
      if (data.length == 0) {
        this.isShowHint = true;
        return;
      } else {
        this.isShowHint = false;
      }
      this.deviceName = [];
      this.deviceData = [];
      data.forEach(item => {
        this.deviceName.push(item.name);
        this.deviceData.push({
          name: item.name,
          value: item.value
        })
      })
      this.getChartData();
    },

    getChartData() {
      var echarts = require("echarts");
      var div = document.getElementById("off-line");
      var chart = echarts.init(div);

      var trafficWay = this.deviceData;
      var data = [];
      var color = ['rgba(79,217,33,0.6)', 'rgba(0,207,255,0.6)', 'rgba(0,108,237,0.6)', 'rgba(238,210,44,0.6)',
        'rgba(255,168,0,0.6)', 'rgba(255,91,0,0.6)', 'rgba(226,76,42,0.6)', 'rgba(79,217,33,0.6)', 'rgba(0,207,255,0.6)', 'rgba(0,108,237,0.6)', 'rgba(238,210,44,0.6)',
        'rgba(255,168,0,0.6)', 'rgba(255,91,0,0.6)', 'rgba(226,76,42,0.6)'];
      for (var i = 0; i < trafficWay.length; i++) {
        data.push({
          value: trafficWay[i].value,
          name: trafficWay[i].name,
          itemStyle: {
            normal: {
              shadowBlur: 12,
              shadowColor: color[i]
            }
          }
        });
      }
      chart.setOption({
        color: ['#4fd921', '#00cfff', '#006ced', '#eed22c',
          '#ffa800', '#ff5b00', '#ff3000', '#4fd921', '#00cfff', '#006ced', '#eed22c',
          '#ffa800', '#ff5b00', '#ff3000'],
        tooltip: {
          show: true,
          formatter: "{a} <br/>{b} : {c} ({d}%)",
          axisPointer: {
            type: "shadow",
            shadowStyle: {
              color: 'rgba(150,150,150,0.1)'
            }
          },
          padding: [4, 10],
          backgroundColor: "rgba(255 ,255 ,255 ,1)",
          borderColor: "#eee",
          borderWidth: "1",
          textStyle: {
            color: "#666"
          },
          extraCssText: "box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);",
        },
        legend: {
          orient: 'vertical',
          data: this.deviceName,
          left: '1%',
          top: '2%',
          itemWidth: 22,
          itemHeight: 14,
          itemGap: 10,
          textStyle: {
            fontSize: 13,
            color: '#5c5c5c'
          },
          align: 'left',
          itemGap: 12
        },
        series: [{
          name: '设备离线',
          type: 'pie',
          clockWise: false,
          radius: [46, 60],
          center: ['62%', '55%'],
          hoverAnimation: false,
          roundCap: true,
          itemStyle: {
            normal: {
              label: {
                show: true,
                position: 'outside',
                formatter: '{b}: {@2012} ',
                textStyle: {
                  lineHeight: 14
                }
              },
              labelLine: {
                length: 12,
                length2: 16,
                show: true
              }
            }
          },
          data: data
        }]
      });
    }
  }
};
</script>

<style  scoped>
#off-line {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  color: #aaaaaa;
}
</style>
